<template>
  <div class="synthetic-card">
    <ul>
      <li
        class="contentItem"
        v-for="(item, index) in resData"
        :key="index"
        @click="gotoSyntheticAction(item)"
      >
        <div class="card_top">
          <div class="contentItem-left">
            <img :src="show_url + item.images[0]" />
          </div>

          <div class="contentItem-right">
            <div class="contentItemRight-top">
              {{ item.name }}
            </div>

            <div class="contentItemRight-center" v-if="which == 'list'">
              <span>限量</span>
              <span class="color-green">{{ item.num }}</span>

              <span class="color-grey">|</span>

              <span>剩余</span>
              <span class="color-red">{{ item.left_num }}</span>
            </div>

            <div
              class="contentItemRight-bottom"
              :class="{ 'contentItemRight-bottomHistory': which == 'history' }"
            >
              <template v-if="which == 'list'">
                {{ item.start_time }} 至 {{ item.end_time }}
              </template>
              <template v-else>
                {{ item.create_time }}
              </template>
            </div>
          </div>

          <div
            class="contentItem-state"
            v-if="which == 'list' && item.is_finish == 1"
          >
            已结束
          </div>
        </div>

        <div class="card_bottom" v-if="which == 'list' && item.is_finish == 1">
          <div class="m_contentItem-state">已结束</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SyntheticCard",
  props: {
    which: {
      type: String,
      default: "list",
    },
    resData: {
      type: Array,
      required: true,
    },
    show_url: {
      type: String,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {
    // ========== goto ==========
    gotoSyntheticAction(payload) {
      this.$router.push({
        path: "/syntheticAction",
        query: {
          id: payload.id,
          which: this.which
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.synthetic-card {
  width: 100%;

  ul,
  li {
    list-style: none;
  }

  .contentItem {
    position: relative;
    width: 100%;
    height: 130px;
    background: #1e2020;
    margin-bottom: 15px;
    padding: 0 15px;
    cursor: pointer;

    .card_top {
      display: flex;
      align-items: center;
      height: 100%;

      .contentItem-left {
        width: 90px;
        height: 90px;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .contentItem-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 90px;
        margin-left: 20px;

        .contentItemRight-top {
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 14px;
          margin-top: 2px;
        }

        .contentItemRight-center {
          margin: 20px 0 15px 0;

          span {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 12px;
          }

          span:nth-child(1),
          span:nth-child(4) {
            margin-right: 5px;
          }
          span:nth-child(3) {
            margin: 0 10px;
          }
        }

        .contentItemRight-bottom {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 12px;
        }

        .contentItemRight-bottomHistory {
          margin-top: 53px;
        }
      }

      .contentItem-state {
        position: absolute;
        right: 20px;
        top: 15px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #aaaaaa;
        line-height: 12px;
      }
    }

    .card_bottom {
      display: none;
    }
  }
}

@media screen and (max-width: 768px) {
  .synthetic-card {
    .contentItem {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 34.6667vw;
      height: auto;
      background: #2b2c2d;
      box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      margin-bottom: 4vw;
      padding: 0 4vw;
      cursor: pointer;

      .card_top {
        display: flex;
        align-items: center;
        width: 100%;
        height: 34.6667vw;

        .contentItem-left {
          width: 24vw;
          height: 24vw;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        .contentItem-right {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          height: 24vw;
          margin-left: 4vw;

          .contentItemRight-top {
            font-size: 3.7333vw;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 4.8vw;
            margin-top: 0;
          }

          .contentItemRight-center {
            margin: 4vw 0;

            span {
              font-size: 3.2vw;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              line-height: 3.2vw;
            }

            span:nth-child(1),
            span:nth-child(4) {
              margin-right: 1.3333vw;
            }
            span:nth-child(3) {
              margin: 0 2.6667vw;
            }
          }

          .contentItemRight-bottom {
            font-size: 3.2vw;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 3.2vw;
          }

          .contentItemRight-bottomHistory {
            margin-top: 12.8vw;
          }
        }

        .contentItem-state {
          display: none;
        }
      }

      .card_bottom {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 10.9333vw;
        margin-top: 4vw;
        border-top: 0.2667vw solid #333333;

        .m_contentItem-state {
          font-size: 3.2vw;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #aaaaaa;
          line-height: 3.2vw;
        }
      }
    }
  }
}

// common important style
.color-green {
  color: #00ffb0 !important;
}
.color-red {
  color: #ff8686 !important;
}
.color-grey {
  color: #999999 !important;
}
</style>
